<%--
  Created by IntelliJ IDEA.
  User: 松红
  Date: 2016/12/15
  Time: 19:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>导航</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="2000000">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="http://favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--导入css文件（CDN与本地）-->
    <%--引入sui mobile 框架的css文件--%>
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/sj/qnui/1.5.1/css/sui.min.css">
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchControl/1.4/src/SearchControl_min.css"/>
    <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet"
          type="text/css"/>


    <%--加入map的css样式--%>
    <style>
        #map_container {
            height: 100%;
            border: 1px solid #999;
            height: 400px;
            margin: 5px;
        }

        .BMap_cpyCtrl {
            display: none !important;
        }

        @media print {
            #notes {
                display: none
            }

            #map_container {
                margin: 0
            }
        }
    </style>
</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <%--地图标题栏--%>
        <header class="bar bar-nav">
            <h1 class="title">地图</h1>
        </header>
        <div class="content">
            <div class="content-bock">
                <div id="searchBox"></div>
                <div id="map_container"></div>
            </div>
        </div>

        <nav class="bar bar-tab">
            <%--首页按钮--%>
            <a class="tab-item external" href="<%=request.getContextPath()%>/">
                <span class="icon icon-home"></span><%--引用css中首页图片的样式--%>
                <span class="tab-label">首页</span>
            </a>
            <%--球队简介按钮--%>
            <a class="tab-item external" href="<%=request.getContextPath()%>/team/team/list">
                <span class="icon icon-menu"></span><%--引用css中简介图片的样式--%>
                <span class="tab-label">球队</span>
            </a>
            <%--队员管理按钮--%>
            <a class="tab-item external" href="<%=request.getContextPath()%>/team/member/list">
                <span class="icon icon-card"></span><%--引用css中记录图片的样式--%>
                <span class="tab-label">队员</span>
            </a>
            <%--约战记录按钮--%>
            <a class="tab-item external " href="<%=request.getContextPath()%>/challenge/Challenge/receive">
                <span class="icon icon-settings"></span><%--引用css中管理图片的样式--%>
                <span class="tab-label">约战</span>
            </a>
        </nav>
    </div>
</div>


<%--引入sui mobile 框架的js文件--%>
<script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="http://g.alicdn.com/sj/qnui/1.5.1/js/sui.min.js"></script>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/library/SearchControl/1.4/src/SearchControl_min.js"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
<!--地图导航-->
<script type="text/javascript">/*<![CDATA[*/
// 创建地图对象并初始化
var mp = new BMap.Map("map_container", {
    enableHighResolution: true //是否开启高清
});
var point = new BMap.Point(116.404, 39.915);
mp.centerAndZoom(point, 14); //初始化地图
mp.enableInertialDragging(); //开启关系拖拽
mp.enableScrollWheelZoom();  //开启鼠标滚动缩放

// 添加定位控件
var geoCtrl = new BMap.GeolocationControl({
    showAddressBar: true //是否显示
    , enableAutoLocation: true //首次是否进行自动定位
    , offset: new BMap.Size(0, 25)
    //, locationIcon     : icon //定位的icon图标
});

//监听定位成功事件
geoCtrl.addEventListener("locationSuccess", function (e) {
    console.log(e);
});

//监听定位失败事件
geoCtrl.addEventListener("locationError", function (e) {
    console.log(e);
});

// 将定位控件添加到地图
mp.addControl(geoCtrl);

//检索类型
var type = "";
var type1 = "";
var type2 = "";
type = LOCAL_SEARCH;   //周边检索
type1 = TRANSIT_ROUTE; //公交检索
type2 = DRIVING_ROUTE; //驾车检索

//创建鱼骨控件
var navCtrl = new BMap.NavigationControl({
    anchor: BMAP_ANCHOR_TOP_LEFT //设置鱼骨控件的位置
});
// 将鱼骨添加到地图当中
mp.addControl(navCtrl);


//创建检索控件
var searchControl = new BMapLib.SearchControl({
    container: "searchBox" //存放检索控件的容器
    , map: mp          //检索的关联地图
    , type: type //检索类型
    , type: type1
    , type: type2

});

document.getElementById("selectType").onchange = function () {
    searchControl.setType(this.value);
};

//添加路况控件
var ctrl = new BMapLib.TrafficControl({
    showPanel: true //是否显示路况提示面板
});
mp.addControl(ctrl);
ctrl.setAnchor(BMAP_ANCHOR_TOP_RIGHT);


</script>
</body>
</html>
